<template>
  <div class="withdrawals-page">
    <div class="page-header">
      <h2 class="page-title">佣金提现</h2>
      <div class="header-actions">
        <select class="filter-select">
          <option value="">全部状态</option>
          <option value="0">待处理</option>
          <option value="1">已完成</option>
          <option value="2">已拒绝</option>
        </select>
        <select class="filter-select">
          <option value="">全部门店</option>
          <option value="1">门店1</option>
          <option value="2">门店2</option>
          <option value="3">门店3</option>
        </select>
      </div>
    </div>

    <!-- 提现统计 -->
    <div class="stats-overview">
      <div class="stat-card">
        <div class="stat-icon pending">
          <svg viewBox="0 0 24 24">
            <path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z"/>
          </svg>
        </div>
        <div class="stat-content">
          <h3 class="stat-number">8</h3>
          <p class="stat-label">待处理申请</p>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon amount">
          <svg viewBox="0 0 24 24">
            <path d="M7,15H9C9,16.08 10.37,17 12,17C13.63,17 15,16.08 15,15C15,13.9 13.96,13.5 11.76,12.97C9.64,12.44 7,11.78 7,9C7,7.21 8.47,5.69 10.5,5.18V3H13.5V5.18C15.53,5.69 17,7.21 17,9H15C15,7.92 13.63,7 12,7C10.37,7 9,7.92 9,9C9,10.1 10.04,10.5 12.24,11.03C14.36,11.56 17,12.22 17,15C17,16.79 15.53,18.31 13.5,18.82V21H10.5V18.82C8.47,18.31 7,16.79 7,15Z"/>
          </svg>
        </div>
        <div class="stat-content">
          <h3 class="stat-number">￥3,280</h3>
          <p class="stat-label">待提现金额</p>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon completed">
          <svg viewBox="0 0 24 24">
            <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/>
          </svg>
        </div>
        <div class="stat-content">
          <h3 class="stat-number">￥25,600</h3>
          <p class="stat-label">本月已提现</p>
        </div>
      </div>
    </div>

    <!-- 提现申请列表 -->
    <div class="withdrawals-table">
      <div class="table-header">
        <div class="header-cell">分销员</div>
        <div class="header-cell">门店</div>
        <div class="header-cell">提现金额</div>
        <div class="header-cell">收款码</div>
        <div class="header-cell">申请时间</div>
        <div class="header-cell">状态</div>
        <div class="header-cell">操作</div>
      </div>
      
      <div class="table-body">
        <div class="table-row" v-for="n in 10" :key="n">
          <div class="table-cell">
            <div class="distributor-info">
              <img src="https://via.placeholder.com/40x40" alt="头像" class="distributor-avatar">
              <div class="distributor-details">
                <div class="distributor-name">分销员{{ n }}</div>
                <div class="distributor-code">D00100{{ n }}</div>
              </div>
            </div>
          </div>
          <div class="table-cell">
            <span class="store-name">门店{{ (n % 3) + 1 }}</span>
          </div>
          <div class="table-cell">
            <span class="amount">￥{{ (n * 120 + 280).toLocaleString() }}</span>
          </div>
          <div class="table-cell">
            <button class="qrcode-btn" @click="viewQRCode(n)">
              <svg viewBox="0 0 24 24">
                <path d="M3,11H5V13H3V11M11,5H13V9H11V5M9,11H13V15H9V11M15,11H17V13H15V11M19,5H21V9H19V5M5,5H9V9H5V5M3,19H5V21H3V19M9,19H11V21H9V19M11,19H13V21H11V19M19,19H21V21H19V19M17,19H19V21H17V19M15,19H17V21H15V19M17,5H19V9H17V5Z"/>
              </svg>
              查看
            </button>
          </div>
          <div class="table-cell">
            <span class="date-text">2024-12-{{ 10 + n }} 14:30</span>
          </div>
          <div class="table-cell">
            <span class="status-badge" :class="getStatusClass(n)">
              {{ getStatusText(n) }}
            </span>
          </div>
          <div class="table-cell">
            <div class="action-buttons">
              <button 
                v-if="getStatusClass(n) === 'pending'" 
                class="action-btn approve"
                @click="handleWithdrawal(n, 'approve')"
              >
                处理
              </button>
              <button 
                v-if="getStatusClass(n) === 'pending'" 
                class="action-btn reject"
                @click="handleWithdrawal(n, 'reject')"
              >
                拒绝
              </button>
              <button 
                v-if="getStatusClass(n) !== 'pending'" 
                class="action-btn view"
                @click="viewDetails(n)"
              >
                详情
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <button class="page-btn">&lt;</button>
      <button class="page-btn active">1</button>
      <button class="page-btn">2</button>
      <button class="page-btn">3</button>
      <button class="page-btn">&gt;</button>
    </div>

    <!-- 提现处理弹窗 -->
    <div v-if="showWithdrawalModal" class="modal-overlay" @click="closeModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>处理提现申请</h3>
          <button @click="closeModal" class="close-btn">
            <svg viewBox="0 0 24 24">
              <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
            </svg>
          </button>
        </div>
        <div class="modal-body">
          <div class="withdrawal-info">
            <p><strong>分销员：</strong>分销员{{ currentWithdrawal?.id }}</p>
            <p><strong>提现金额：</strong>￥{{ currentWithdrawal?.amount }}</p>
            <p><strong>收款码：</strong><button class="link-btn">查看收款码</button></p>
          </div>
          <div class="form-group">
            <label>上传付款截图：</label>
            <input type="file" accept="image/*" class="file-input">
          </div>
          <div class="form-group">
            <label>备注：</label>
            <textarea v-model="adminNote" placeholder="请输入备注信息" class="form-textarea"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button @click="closeModal" class="btn-cancel">取消</button>
          <button @click="confirmWithdrawal" class="btn-confirm">确认{{ currentAction === 'approve' ? '通过' : '拒绝' }}</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const showWithdrawalModal = ref(false)
const currentWithdrawal = ref(null)
const currentAction = ref('')
const adminNote = ref('')

const getStatusClass = (n) => {
  const statuses = ['pending', 'completed', 'rejected']
  return statuses[n % 3]
}

const getStatusText = (n) => {
  const statuses = ['待处理', '已完成', '已拒绝']
  return statuses[n % 3]
}

const viewQRCode = (id) => {
  // 查看收款码逻辑
  console.log('查看收款码:', id)
}

const handleWithdrawal = (id, action) => {
  currentWithdrawal.value = {
    id: id,
    amount: (id * 120 + 280).toLocaleString()
  }
  currentAction.value = action
  showWithdrawalModal.value = true
}

const viewDetails = (id) => {
  // 查看详情逻辑
  console.log('查看详情:', id)
}

const closeModal = () => {
  showWithdrawalModal.value = false
  currentWithdrawal.value = null
  currentAction.value = ''
  adminNote.value = ''
}

const confirmWithdrawal = () => {
  // 确认处理逻辑
  console.log('处理提现:', {
    id: currentWithdrawal.value.id,
    action: currentAction.value,
    note: adminNote.value
  })
  closeModal()
}
</script>

<style scoped>
.withdrawals-page {
  max-width: 1400px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.page-title {
  font-size: 1.8rem;
  font-weight: 600;
  margin: 0;
  color: #2d3748;
}

.header-actions {
  display: flex;
  gap: 15px;
  align-items: center;
}

.filter-select {
  padding: 10px 15px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.9rem;
  outline: none;
  cursor: pointer;
}

/* 统计概览 */
.stats-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon svg {
  width: 28px;
  height: 28px;
  fill: white;
}

.stat-icon.pending {
  background: linear-gradient(135deg, #f59e0b, #eab308);
}

.stat-icon.amount {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.stat-icon.completed {
  background: linear-gradient(135deg, #228B22, #16a34a);
}

.stat-number {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 5px 0;
  color: #2d3748;
}

.stat-label {
  font-size: 0.9rem;
  color: #718096;
  margin: 0;
}

/* 提现表格 */
.withdrawals-table {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
  margin-bottom: 25px;
}

.table-header {
  display: grid;
  grid-template-columns: 2fr 120px 120px 100px 140px 100px 150px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.header-cell {
  padding: 15px 20px;
  font-weight: 600;
  color: #4a5568;
  font-size: 0.9rem;
}

.table-body {
  background: white;
}

.table-row {
  display: grid;
  grid-template-columns: 2fr 120px 120px 100px 140px 100px 150px;
  border-bottom: 1px solid #f1f5f9;
  transition: background-color 0.2s;
}

.table-row:hover {
  background: #f8fafc;
}

.table-cell {
  padding: 15px 20px;
  display: flex;
  align-items: center;
  font-size: 0.9rem;
}

.distributor-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.distributor-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.distributor-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.distributor-name {
  font-weight: 500;
  color: #2d3748;
}

.distributor-code {
  color: #718096;
  font-size: 0.8rem;
  font-family: 'Courier New', monospace;
}

.store-name {
  color: #2d3748;
  font-weight: 500;
}

.amount {
  color: #ef4444;
  font-weight: 600;
  font-family: 'Courier New', monospace;
}

.qrcode-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: white;
  color: #5856d6;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.8rem;
}

.qrcode-btn:hover {
  background: rgba(88, 86, 214, 0.1);
  border-color: #5856d6;
}

.qrcode-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.date-text {
  color: #718096;
  font-size: 0.9rem;
}

.status-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
}

.status-badge.pending {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.status-badge.completed {
  background: rgba(34, 139, 34, 0.1);
  color: #16a34a;
}

.status-badge.rejected {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.action-btn {
  padding: 6px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: white;
  color: #4a5568;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.8rem;
}

.action-btn:hover {
  background: #f7fafc;
}

.action-btn.approve:hover {
  border-color: #228B22;
  color: #228B22;
}

.action-btn.reject:hover {
  border-color: #ef4444;
  color: #ef4444;
}

.action-btn.view:hover {
  border-color: #5856d6;
  color: #5856d6;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.page-btn {
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: white;
  color: #4a5568;
  cursor: pointer;
  transition: all 0.2s ease;
}

.page-btn:hover {
  background: #f7fafc;
  border-color: #5856d6;
}

.page-btn.active {
  background: #5856d6;
  color: white;
  border-color: #5856d6;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 12px;
  width: 500px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.modal-header {
  padding: 20px 25px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: #2d3748;
}

.close-btn {
  background: none;
  border: none;
  color: #718096;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s;
}

.close-btn:hover {
  background: #f7fafc;
  color: #4a5568;
}

.close-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.modal-body {
  padding: 25px;
}

.withdrawal-info {
  margin-bottom: 20px;
  padding: 15px;
  background: #f8fafc;
  border-radius: 8px;
}

.withdrawal-info p {
  margin: 8px 0;
  color: #4a5568;
}

.link-btn {
  background: none;
  border: none;
  color: #5856d6;
  cursor: pointer;
  text-decoration: underline;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #4a5568;
}

.file-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.9rem;
}

.form-textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.9rem;
  resize: vertical;
  outline: none;
}

.form-textarea:focus {
  border-color: #5856d6;
}

.modal-footer {
  padding: 20px 25px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.btn-cancel {
  padding: 10px 20px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: white;
  color: #4a5568;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-cancel:hover {
  background: #f7fafc;
}

.btn-confirm {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  background: #5856d6;
  color: white;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-confirm:hover {
  background: #4c51bf;
}
</style> 